<template>
  <cu-layout :bgStyle="{ color: actBgColor }" :navProp="{ placeholder: true, isOpacity: false }">
    <view :class="[`${prefixCls}-activity-detail-container`]">
      <view class="activity-header">
        <view class="activity-title uv-line-2">您的好友{{ actDetail.phone || '' }}邀请您入住苏享家</view>
        <view class="activity-time">
          <text>{{ `${actDetail.time_s || ''} - ${actDetail.time_e || ''}` }}</text>
        </view>
      </view>
      <view class="activity-body">
        <!-- 活动介绍 -->
        <ActivityCard :cardInfo="rewardCard" v-if="actDetail.gift_list && actDetail.gift_list.length">
          <!-- 活动奖励 -->
          <RewardCard :rewardList="actDetail.gift_list" />
        </ActivityCard>

        <!-- 参与步骤 -->
        <ActivityCard>
          <!-- 步骤 -->
          <ActivityForm :activityParams="queryParams" @onCallback="handleCallback" />
        </ActivityCard>
      </view>

      <!-- 活动规则 -->
      <view class="rule-tips" :style="{ top: `${$Platform.device.safeAreaInsets.top + 44 + 20}px` }" @click="openRulePopup">活动规则</view>
      <ActivityRule ref="activityRulePopup" :ruleInfo="actRule" />
    </view>
  </cu-layout>
</template>

<script>
import { mapActions, mapGetters, mapMutations } from 'vuex'
import { getBringActivityInfo, getBringActivityRule, getBringActivityScene } from './api'
import ActivityCard from './components/activity-card.vue'
import ActivityForm from './components/activity-form.vue'
import ActivityRule from './components/activity-rule.vue'
import RewardCard from './components/reward-card.vue'

export default {
  name: 'bringActivityDetail',
  components: { ActivityRule, ActivityCard, RewardCard, ActivityForm },
  mixins: [],
  props: {},
  data() {
    return {
      queryParams: {
        actId: '', // 活动ID
        inviteUId: '', // 邀请人ID
        refererUId: '', // 邀请人user_id
      },
      actDetail: {},
      actRule: {
        title: '活动规则',
        content: '',
      },
      rewardCard: { title: '礼品介绍', description: '每成功邀请一位好友入住苏享家，根据好友签约时长获得以下奖励之一' },
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters([]),
    actBgImage() {
      return `url(${this.actDetail?.bg_img_share || CDN('/customer/static/images/activity/bring_activity_index_bg@2x.jpg')}) no-repeat top center / contain`
    },
    actBgColor() {
      return this.actDetail?.bg_color_main || '#20a793'
    },
  },
  // 监听页面加载，该钩子被调用时data,computed,function,watch,props,slots已设置完成
  async onLoad(options) {
    console.log('🚀 ~ onLoad detail~ options:', options)

    // 获取页面请求参数(活动id，邀请人id)
    if (options.scene) {
      const queryArg = await this.getActQuery(options.scene)
      this.queryParams = queryArg
    } else this.queryParams = options

    await this.getPageData()
  },
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {},
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {},
  // 加载更多
  onReachBottom() {},

  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    ...mapMutations('user', ['SET_TOKEN']),
    ...mapActions('user', ['GetUserInfo']),
    async getPageData() {
      if (!this.queryParams.actId) return uni.$uv.toast('缺少活动ID！')
      await this.getActInfo()

      // 获取活动规则
      this.getActRule()
    },

    // 显示规则
    openRulePopup() {
      this.$refs.activityRulePopup.open()
    },

    // 处理参与活动后的回调
    handleCallback(res) {
      console.log('🚀 ~ handleCallback ~ res:', res)
      if (res.errcode === 0) {
        this.SET_TOKEN(res?.data?.token)
        this.GetUserInfo()
        uni.$uv.toast(res.errmsg)
        uni.reLaunch({ url: '/pages/main/home' })
      }
    },

    // 获取海报图查询参数
    async getActQuery(scene) {
      const { errcode, data = {} } = await getBringActivityScene({ scene })
      if (errcode === 0) {
        return data?.params || {}
      }
    },

    // 获取活动详情
    async getActInfo() {
      const { actId, inviteUId = '', refererUId } = this.queryParams
      const { errcode, data = {} } = await getBringActivityInfo({ act_id: actId, invitation_id: inviteUId, customer_id: refererUId })
      if (errcode === 0) {
        this.actDetail = data || {}
      }
    },

    // 获取活动规则
    async getActRule() {
      const { errcode, data = {} } = await getBringActivityRule({ act_id: this.queryParams.actId })
      if (errcode === 0) {
        this.actRule.content = data?.rule || ''
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.#{prefixCls('activity-detail-container')} {
  position: relative;
  padding: 40rpx 30rpx 140rpx;
  background: v-bind(actBgImage);
  .activity-header {
    position: relative;
    margin-bottom: 560rpx;
    text-align: center;
    .activity-title {
      width: 55%;
      margin: 56rpx auto 24rpx;
      font-size: 36rpx;
      color: #fe9616;
      font-weight: 600;
    }
    .activity-time {
      height: 40rpx;
      margin: 0 auto;
      color: #666;
      line-height: 40rpx;
      border-radius: 20rpx;
      font-size: 24rpx;
    }
  }

  .rule-tips {
    width: 100rpx;
    height: 48rpx;
    position: fixed;
    right: 0;
    padding: 0 24rpx;
    background: rgba($color: #000000, $alpha: 0.5);
    border-top-left-radius: 240rpx;
    border-bottom-left-radius: 240rpx;
    line-height: 48rpx;
    font-size: 24rpx;
    color: #fff;
    z-index: 98;
  }
}
</style>
